CSS: transition

特定のpropertyが、状態Aから状態Bに変化する際に、変化にかける時間や緩急を指定する

「変化させる」というactionを指定することはできない

誰かが発火した「変化させる」というactoinに対し、変化の仕方を指定する

この状態変化は何によって生じたかは問わない

property

transition

以下4つをまとめて指定する

animationの開始から終了までにかける時間

animationが開始するまでの遅延時間

参考

任意のpropertyをアニメーションできるわけではない

どういう考え方をして実装する？

以下のやり方であってる？

状態Aのcssを定義

code:css

.box {

width: 100px;

height: 100px;

}

状態Bのcssを定義

code:css

.box:hover {

width: 300px;

}

この時点でやめても状態の切り替えはできる

ただし、0秒で切り替わる

これに対して変化の速度などを指定する

transitionを使って、どのpropertyを、どういう速度で変化させるかを指定

これをA側に書く(?)

code:css

.box {

width: 100px;

height: 100px;

transition: all 300ms 0s ease; /* 追加 */

}

transtionは変更に伴ったpropertyの変更程度

もう少し細かく指定したければanimationの方を使う